<template>
    <el-config-provider :locale="zhCn" :size="getGlobalComponentSize">
        <router-view v-show="setLockScreen"/>
        <LockScreen v-if="themeConfig.isLockScreen"/>
        <Settings v-show="setLockScreen" ref="settingsRef"/>
        <CloseFull v-if="!themeConfig.isLockScreen"/>
    </el-config-provider>
</template>

<script lang="ts" name="app" setup>
import {computed, defineAsyncComponent, nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch} from 'vue';
import {useRoute} from 'vue-router';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import {storeToRefs} from 'pinia';
import other from '/@/utils/other';
import mittBus from '/@/utils/mitt';
import stores from "/@/stores";
import router from "/@/router";
import {CacheManager} from "/@/cache";
// 引入组件
const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
const Settings = defineAsyncComponent(() => import('/@/layout/navBars/topBar/settings.vue'));
const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/topBar/closeFull.vue'));

// 定义变量内容
const settingsRef = ref();
const route = useRoute();
const {commonStoreState, tagsViewRoutes} = stores
const {themeConfig} = storeToRefs(stores.themeConfigState);

// 设置锁屏时组件显示隐藏
const setLockScreen = computed(() => {
    // 防止锁屏后，刷新出现不相关界面
    // https://gitee.com/lyt-top/vue-next-admin/issues/I6AF8P
    return themeConfig.value.isLockScreen ? themeConfig.value.lockScreenTime > 1 : themeConfig.value.lockScreenTime >= 0;
});
// 获取全局组件大小
const getGlobalComponentSize = computed(() => {
    return other.globalComponentSize();
});
// 页面加载时
onMounted(() => {
    window.addEventListener("resize", function () {
        commonStoreState.changeScreenWidth(document.body.clientWidth);
    });
    nextTick(() => {
        // 监听布局配'置弹窗点击打开
        mittBus.on('openSettingsDrawer', () => {
            settingsRef.value.openDrawer();
        });
        // 获取缓存中的布局配置
        let themeConfig = CacheManager.getThemeConfig();
        if (themeConfig) {
            stores.themeConfigState.setThemeConfig({themeConfig: themeConfig});
            document.documentElement.style.cssText =CacheManager.getThemeConfigStyle();
        }
        // 获取缓存中的全屏配置
        if (CacheManager.getIsTagsViewCurrenFull()) {
            tagsViewRoutes.setCurrenFullscreen(CacheManager.getIsTagsViewCurrenFull());
        }
    });
});
// 页面销毁时，关闭监听布局配置/i18n监听
onUnmounted(() => {
    mittBus.off('openSettingsDrawer', () => {
    });
});
// 监听路由的变化，设置网站标题
watch(
    () => route.path,
    () => {
        //设置浏览器标题
        const {themeConfig} = storeToRefs(stores.themeConfigState);
        return nextTick(() => {
            let globalTitle: string = themeConfig.value.globalTitle;
            //当前路由上的meta属性中的配置
            const {meta} = router.currentRoute.value;
            document.title = `${meta.title} - ${globalTitle}` || globalTitle;
        });
    },
    {
        deep: true,
    }
);
</script>
